<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<script src="https://d3js.org/d3.v6.min.js"> 
</script> 
</head> 
<body> 
	
		
	
		
		
		
		<script> 
			var dataset = [ 250 , 210 , 170 , 130 , 90 ];

var svg = d3.select('body').append('svg')
.attr('width',600)
.attr('height',600)

var g= svg.selectAll('g')
.data(dataset)
.join('g')
.attr('transform','translate('+300+','+300+')')

g.append('rect')
.attr('x',2)
.attr('y',function(d,i){
  return i*25
})
.attr('width',function(d){
  return d
})
.attr('height',23)
.attr('fill','steeblue')
			
//x：矩形左上角的 x 坐标
//y：矩形左上角的 y 坐标
//width：矩形的宽度
//height：矩形的高度
//要注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。
		</script> 
	
</body> 
</html> 
